<!--
 * @Description:前端导出
 * @Author: your name
 * @Date: 2023-06-30
 * @LastEditTime: 2023-06-30
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="page">
    <el-button @click="exportExcel({ type: 'js', fileName })"
      >js 导出excel</el-button
    >
    <el-button
      @click="
        exportExcel({
          type: 'vue',
          fileName: 'vue',
          selector: '#table'
        })
      "
      >vue 导出excel</el-button
    >

    <!-- table表格 -->
    <el-table ref="table" id="table" :data="tableData">
      <el-table-column
        :prop="prop"
        :label="label"
        v-for="{ label, prop } in tableHeader"
        :key="prop"
      >
        <template slot-scope="scope">
          <span v-if="prop !== 'age'">
            {{scope.row[prop]}}
          </span>
          <el-tag v-else class="animate__animated animate__rollIn">{{
            scope.row.age
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { tableToExcel, exportToExcel } from '@/utils/tableToExcel'

export default {
  name: 'DemoFour',
  data() {
    return {
      fileName: 'excel文件',
      tableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '编号',
          prop: 'bh'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          name: '小明',
          age: '12',
          bh: 'JMKFI1001010393KKDI',
          address: '地方大萨达大幅度'
        },
        {
          name: '小花',
          age: '34',
          bh: 'JMKFI1001010393KKDI',
          address: '地方大萨达大幅度'
        }
      ]
    }
  },
  methods: {
    exportExcel({ type, fileName, selector }) {
      if (type === 'js') {
        tableToExcel({
          fileName: fileName,
          tableHeader: this.tableHeader,
          tableData: this.tableData
        })
      } else if (type === 'vue') {
        exportToExcel(selector, fileName)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
